<template>
	<view class="page-container">
		<view class="user-header">
			<view class="avatar-wrap">
				<image class="avatar" :src="userInfo.avatar || '/static/avatar-fox.png'" mode="aspectFill"
					@click="chooseAvatar"></image>
				<view class="greeting">
					<text class="greeting-text">Hi~{{ userInfo.name || '欢迎回来' }}</text>
					<button class="login-btn" @click="handleLoginOut">{{ isLogin ? '登出' : '登录' }}</button>
				</view>
			</view>

			<view class="stats-bar">
				<text class="stat-item">关注14</text>
				<text class="divider">|</text>
				<text class="stat-item">话题0</text>
			</view>

			<view class="func-buttons">
				<view class="func-btn">
					<image class="func-icon" src="/static/icon-collect.png"></image>
					<text class="func-text">收藏</text>
				</view>
				<view class="func-btn">
					<image class="func-icon" src="/static/icon-history.png"></image>
					<text class="func-text">历史</text>
				</view>
				<view class="func-btn">
					<image class="func-icon" src="/static/icon-setting.png"></image>
					<text class="func-text">设置</text>
				</view>
			</view>
		</view>

		<view class="ad-banner">
			<text class="ad-text">瓜分30亿现金红包</text>
			<button class="ad-btn">趣抢</button>
		</view>

		<view class="publish-area">
			<view class="decor-icons">
				<image class="decor-icon" src="/static/icon-doc.png"></image>
				<image class="decor-icon" src="/static/icon-pic.png"></image>
				<image class="decor-icon" src="/static/icon-tag.png"></image>
			</view>
			<text class="publish-desc">已有385,893人</text>
			<text class="publish-desc">在这里发布身边的新鲜事</text>
			<button class="publish-btn" @click="handlePublish">我也要发布</button>
			<text class="link-text" @click="toCardViewPage">先去逛逛></text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isLogin: false,
				userInfo: {
					avatar: '',
					name: ''
				}
			};
		},
		onShow() {
			const username = uni.getStorageSync('username');
			this.isLogin = !!username;
			this.userInfo = {
				name: username || '',
				avatar: uni.getStorageSync('userAvatar') || ''
			};
			// 每次显示页面时，同步tabBar文字
			uni.setTabBarItem({
				index: 3,
				text: this.isLogin ? '我的' : '未登录'
			});
		},
		methods: {
			handleLoginOut() {
				if (this.isLogin) {
					uni.showModal({
						title: '确认登出',
						content: '是否退出登录？',
						success: (res) => {
							if (res.confirm) {
								uni.removeStorageSync('username');
								uni.removeStorageSync('userAvatar');
								this.isLogin = false;
								this.userInfo = {
									avatar: '',
									name: ''
								};
								// 登出后还原tabBar文字为“未登录”
								uni.setTabBarItem({
									index: 3,
									text: '未登录'
								});
								uni.showToast({
									title: '已登出',
									icon: 'success'
								});
							}
						}
					});
				} else {
					uni.navigateTo({
						url: "/pages/login/login"
					});
				}
			},
			chooseAvatar() {
				if (!this.isLogin) return uni.showToast({
					title: '请先登录',
					icon: 'none'
				});
				uni.chooseImage({
					count: 1,
					success: (res) => {
						this.userInfo.avatar = res.tempFilePaths[0];
						uni.setStorageSync('userAvatar', res.tempFilePaths[0]);
					}
				});
			},
			handlePublish() {
				if (!this.isLogin) {
					uni.showModal({
						title: '提示',
						content: '请先登录',
						confirmText: '去登录',
						success: (res) => res.confirm && uni.navigateTo({
							url: "/pages/login/login"
						})
					});
				}
			},
			toCardViewPage() {
				uni.switchTab({
					url: "/pages/cardViewPage/cardViewPage"
				});
			}
		}
	};
</script>

<style scoped>
	.page-container {
		width: 100vw;
		height: 100vh;
		background-color: #fff;
		display: flex;
		flex-direction: column;
	}

	.user-header {
		background: linear-gradient(to bottom, #ff9a9e 0%, #fad0c4 100%);
		padding: 20rpx 30rpx;
		border-radius: 0 0 20rpx 20rpx;
	}

	.avatar-wrap {
		display: flex;
		align-items: center;
		margin-bottom: 15rpx;
	}

	.avatar {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		border: 4rpx solid #fff;
		cursor: pointer;
	}

	.greeting {
		margin-left: 20rpx;
	}

	.greeting-text {
		font-size: 32rpx;
		color: #fff;
		font-weight: 500;
	}

	.login-btn {
		background-color: #fff;
		color: #ff6b6b;
		font-size: 24rpx;
		padding: 6rpx 20rpx;
		border-radius: 20rpx;
		margin-top: 10rpx;
		border: none;
		background-color: v-bind(isLogin ? '#ff6b6b' : '#fff');
		color: v-bind(isLogin ? '#fff' : '#ff6b6b');
	}

	.stats-bar {
		display: flex;
		color: #fff;
		font-size: 28rpx;
		margin-bottom: 20rpx;
	}

	.stat-item {
		margin: 0 10rpx;
	}

	.divider {
		color: rgba(255, 255, 255, 0.8);
	}

	.func-buttons {
		display: flex;
		justify-content: space-around;
	}

	.func-btn {
		display: flex;
		flex-direction: column;
		align-items: center;
		color: #fff;
	}

	.func-icon {
		width: 40rpx;
		height: 40rpx;
		margin-bottom: 5rpx;
	}

	.func-text {
		font-size: 24rpx;
	}

	.ad-banner {
		background-color: #ffd166;
		color: #d93737;
		font-size: 28rpx;
		font-weight: bold;
		padding: 15rpx 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 20rpx;
		border-radius: 10rpx;
	}

	.ad-btn {
		background-color: #fff;
		color: #d93737;
		font-size: 24rpx;
		padding: 5rpx 15rpx;
		border-radius: 15rpx;
		border: none;
	}

	.publish-area {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
		padding: 20rpx;
	}

	.decor-icons {
		display: flex;
		gap: 40rpx;
		margin-bottom: 30rpx;
	}

	.decor-icon {
		width: 80rpx;
		height: 80rpx;
		opacity: 0.8;
	}

	.publish-desc {
		font-size: 28rpx;
		color: #666;
		margin: 5rpx 0;
	}

	.publish-btn {
		background-color: #ff6b6b;
		color: #fff;
		font-size: 30rpx;
		padding: 15rpx 40rpx;
		border-radius: 30rpx;
		margin: 20rpx 0;
		border: none;
	}

	.link-text {
		font-size: 26rpx;
		color: #999;
		cursor: pointer;
	}
</style>